<script setup lang="ts">
import { onMounted } from 'vue';
import { SYS_USER_QUERY_APP } from '/@/api/modules/base/app-sys-user';
import { getCurrentInstance, makePhoneCall } from '@tarojs/taro';
import { state } from './state';
const params = getCurrentInstance().router?.params as {
  id: string;
};
function queryUser(page: number = 1, pageSize: number = 15) {
  SYS_USER_QUERY_APP({
    comQuery: { page, pageSize },
    id: params.id,
  }).then((res) => {
    if (!res.content || !res.content.length) return;
    state.user = res.content[0];
  });
}
onMounted(() => {
  queryUser();
});
function call() {
  if (state.user.phone) {
    makePhoneCall({
      phoneNumber: state.user.phone,
    });
  }
}
</script>

<template>
  <view class="contacts-detail app-page--1">
    <app-navbar title="通讯录" />
    <scroll-view class="app-page__wrapper" :scroll-y="true" :lower-threshold="100">
      <view class="contacts-detail__wrapper">
        <nut-cell-group>
          <nut-cell title="姓名" :desc="state.user.name || state.user.nickName || '_'" />
          <nut-cell title="所在部门" :desc="state.user.organ || '_'" />
          <nut-cell title="联系电话" :desc="state.user.phone || '_'" />
        </nut-cell-group>
        <view class="contacts-detail__footer">
          <nut-button block type="info" @click="call"> 呼叫 </nut-button>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<style lang="scss">
@import './index.scss';
</style>
